<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" class="demo-form-inline">

        <div v-for="(value,index) in list" :key="index">


          <el-form-item v-show="index!=3" label="键">
            <el-input :readonly="true" v-model="value.key" placeholder="键"></el-input>
          </el-form-item>
          <el-form-item v-show="index!=3" label="值">
            <el-input v-model="value.val" placeholder="值"></el-input>
          </el-form-item>
          <el-form-item v-show="index!=3" label="描述">
            <el-input v-model="value.description" placeholder="描述"></el-input>
          </el-form-item>

        </div>

        <el-form-item>
          <el-form-item label="微信二维码">
            <el-upload
              class="avatar-uploader"
              :action="host+'/guard/upload?module=site'"
              accept=".png,.jpg,.jpeg"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              >
              <img style="width: 100px;height: 100px" v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form-item>

        <br/>
        <el-form-item>
          <!--<el-button @click="add" type="danger">添加</el-button>-->
          <el-button @click="onSubmit" type="primary">提交</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>

<script>
  import { myGet, myPost } from '@/utils/myRequest'
  const urlLst = '/guard/site/setting/index'
  const urlAdd = '/guard/site/setting/index'

  export default {
    data() {
      return {
        host:process.env.VUE_APP_HOST,
        imageUrl:"",
        list:[]
      }
    },
    methods: {

      handleAvatarSuccess(res, file) {
        if(res.status){
          this.imageUrl = res.data.records.url
          this.list[3].val = res.data.records.filePath
        }else{
          this.$message.error('上传失败!')
        }
      },

      async getRecords(){
        await myGet(urlLst).then(res=>{
          this.list = res.data.records
          this.imageUrl = this.host+ this.list[3].val
        })
      },
      add(){
        this.list.push({
          id:0,
          description:'',
          key:'',
          val:'',
        })
      },
      onSubmit() {
        myPost(urlAdd,{ settings:this.list }).then(res=>{
          if(res.status){
            this.$message.success(res.msg);
          }
        })
      }
    },
    mounted() {
      this.getRecords().then(res=>{
        if(this.list.length<=0){
          this.add()
        }
      })


    },
  }
</script>

<style>

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>
